<template>
    <div>
        <!-- 头部导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <!-- 搜索框 -->
            <el-row>
                <el-col :span="8">
                    <el-input 
                        placeholder="请输入内容" 
                        v-model="queryInfo.query" 
                    >
                    <el-button 
                        slot="append" 
                        con="el-icon-search"
                    >搜索</el-button>
                </el-input>
                </el-col>
            </el-row>

            <!-- 订单列表数据 -->
            <el-table :data="orderList">
                <el-table-column type="index"></el-table-column>
                
                <el-table-column 
                    label="订单编号" 
                    prop="order_number"
                ></el-table-column>

                <el-table-column 
                    label="订单价格" 
                    prop="order_price"
                ></el-table-column>
                
                <el-table-column 
                    label="是否付款" 
                    prop="pay_status"
                >
                    <template slot-scope="scopt">
                        <el-tag v-if="scopt.row.pay_status==='1'" type="success">已付款</el-tag>
                        <el-tag v-else type="danger">未付款</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column 
                    label="是否发货" 
                    prop="is_send"
                ></el-table-column>
                
                <el-table-column 
                    label="下单时间" 
                    prop="create_time"
                >
                    <template slot-scope="scope">
                        <!-- |(管道)符号把 create_time的计算结果当成参数给了dateFormat -->
                        {{scope.row.create_time | dateFormat}}
                    </template>
                </el-table-column>

                <el-table-column 
                    label="操作" 
                >
                <!--  slot-scope="scope" -->
                    <template>
                        <el-button 
                            size="mini" type="primary"
                            icon="el-icon-edit"
                            @click="showBox"
                        >
                        </el-button>
                        <el-button 
                            size="mini" type="success"
                            icon="el-icon-location"
                            @click="showProgress"
                        >
                        </el-button>
                    </template>

                </el-table-column>

            </el-table>


            <!-- 分页功能 -->
            <!-- 
                页面刷新,默认显示的是2条数据
                size-change：每页显示条数改变触发的事件
                current-change:页码改变触发的事件
                current-page: 当前页数
                page-sizes：每页显示个数选择器的选项设置
                page-size：每页显示条目个数(选择框那个)
                layout：组件布局，子组件名用逗号分隔
                total：总条目数
             -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 15]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>

            

        </el-card>

        <!-- 修改按钮的对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="addresVisible"
            width="50%"
            @before-close="addressDialogClosed"
        >
            <el-form 
                :model="addressForm" 
                :rules="addressFormRules" 
                ref="addressFormRef"
                label-width="100px"
            >

                <el-form-item label="省市区/县" prop="address1">
                    <el-cascader 
                        :options="cityDate"
                        v-model="addressForm.address1"
                        :props="{ expandTrigger: 'hover' }"
                    >

                    </el-cascader>
                </el-form-item>

                <el-form-item label="详细地址" prop="address2">
                    <el-input v-model="addressForm.address2"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addresVisible = false">取 消</el-button>
                <el-button type="primary" @click="addresVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 展示物流进度的对话框 -->
        <el-dialog
            title="物流进度"
            :visible.sync="progressVisible"
            width="50%"
        >

        <!-- 时间线上的时间timestamp -->
              <el-timeline >
                <el-timeline-item
                    v-for="(activity, index) in progressInfo"
                    :key="index"
                    :timestamp="activity.time"
                >
                    {{activity.context}}
                </el-timeline-item>
            </el-timeline>

            
        </el-dialog>


    </div>
</template>

<script>

    import cityDate from "./citydata.js";

    export default {
        created() {
            this.getOrderList();
        },

        data() {
            return {
                
                //查询字符串
                queryInfo:{
                    query:"",
                    pagenum:1, //页码
                    pagesize:10, //下拉框每页显示的条目数
                },

                total:0, //总条数

                //数据列表
                orderList:[],

                //控制修改地址的对话框的显示和隐藏
                addresVisible:false,

                //修改对话框的数据源
                addressForm:{
                    address1:[],
                    address2:'',
                },

                //验证规则
                addressFormRules:{
                    address1:[
                        {
                            required:true,
                            message: '请选择省市区/县',
                            trigger:'blur'
                        }
                    ],
                    address2:[
                        {
                            required:true,
                            message: '请填写详细地址',
                            trigger:'blur'
                        }
                    ],

                },


                //获取的城市列表，导入的插件
                cityDate,


                //控制物流进度的
                progressVisible:false,

                //物流使用的空数组
                progressInfo:[],

                value:'',

                

            }
        },

        
        methods: {
            //查询方法
            async getOrderList(){
                const {data:res} =await this.$http.get("orders",{
                    params:this.queryInfo,
                })

                if(res.meta.status !== 200){
                    return this.$message.error("获取order数据失败");
                }
                // console.log(res);
                this.total = res.data.total;
                this.orderList = res.data.goods;

            },

            //每页显示条数发生了变化
            handleSizeChange(newSize){
                // console.log(newSize);
                this.queryInfo.pagesize = newSize;
                this.getOrderList();
            },

            //页码改变触发的事件
            handleCurrentChange(newPage){
                // console.log(newPage);
                this.queryInfo.pagenum =newPage;
                this.getOrderList();
            },

            //展示修改地址的对话框
            showBox(){
                this.addresVisible= true;

            },

            //修改按钮对话框的关闭事件
            addressDialogClosed(){
                this.$refs.addressForm.resetFields();
            },


            //物流进度的事件
            async showProgress(){
                const {data:res} = await this.$http.get(`/kuaidi/73134987783123`)
                if(res.meta.status !== 200){
                    return this.message.error("获取物流信息失败");
                }
                this.progressInfo = res.data;
                // console.log(this.progressInfo);
                this.progressVisible = true;
            },

        },
        
    }
</script>

<style lang="less" scoped>
    .el-cascader {
        width: 100%;
    }
</style>